<!--<template>-->
<!--    <div>-->

<!--        <testheader></testheader>-->

<!--        <input type="text" v-model="message" />-->

<!--        {{ message }}-->

<!--        <br />-->

<!--        {{ reverse_message }}-->

<!--        <br /><br />-->

<!--        千米: <input type="text" v-model = "kilometers" />-->
<!--        米: <input type="text" v-model = "meters" />-->

<!--        <br /><br />-->

<!--        <div v-show="flag">-->

<!--            你能看见我-->

<!--        </div>-->

<!--        <br /><br />-->

<!--        <div v-if="num==9">-->

<!--            num == 9-->

<!--        </div>-->
<!--        <div v-else-if="num==10">-->

<!--            num == 10-->

<!--        </div>-->
<!--        <div v-else>-->

<!--            num !=9 && num != 10-->

<!--        </div>-->


<!--        <br /><br />-->

<!--        <ul>-->

<!--            <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">-->

<!--                {{ item.text }}-->

<!--            </li>-->


<!--        </ul>-->

<!--        <br /><br />-->

<!--        <table>-->

<!--            <tr v-for="(item,index) in datalist">-->

<!--                <td>-->

<!--                    {{ item.name}}-->

<!--                </td>-->

<!--                <td>-->

<!--                    <button @click="minus(index)">-</button>-->

<!--                    <input type="text" v-model="item.num" />-->

<!--                    <button @click="add(index)">+</button>-->

<!--                </td>-->

<!--            </tr>-->

<!--        </table>-->

<!--        <button @click="add_cart('宝马')">添加宝马</button>-->
<!--        <button @click="add_cart('电脑')">添加电脑</button>-->

<!--        <br />-->
<!--        {{ totalCount() }}-->

<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--    //导入子组件-->
<!--    import testheader from './testheader'-->

<!--    export default {-->

<!--        data(){-->
<!--            return {-->
<!--                message:'hello world',-->
<!--                kilometers:0,-->
<!--                meters:0,-->
<!--                flag:true,-->
<!--                num:8,-->
<!--                tlist:[{text:'汽车'},{text:'面包'},{text:'牛奶'},{text:'鲜花'}],-->
<!--                datalist:[]-->
<!--            }-->
<!--        },-->
<!--        //定义组建标签-->
<!--        components:{-->
<!--            'testheader':testheader-->
<!--        },-->
<!--        //自定义方法-->
<!--        methods:{-->
<!--            //汇总商品数量-->
<!--            totalCount:function(){-->

<!--                //默认数量-->
<!--                let total = 0;-->
<!--                //遍历-->
<!--                for(let i=0,l=this.datalist.length;i<l;i++){-->

<!--                        total += this.datalist[i].num;-->
<!--                }-->

<!--                return total;-->


<!--            },-->
<!--            //减少商品数量-->
<!--            minus:function(index){-->
<!--                if(this.datalist[index].num > 0){-->
<!--                this.datalist[index].num&#45;&#45;;-->
<!--            }-->
<!--            },-->
<!--            //增加商品数量-->
<!--            add:function(index){-->

<!--                this.datalist[index].num++;-->

<!--            },-->
<!--            //添加购物车-->
<!--            add_cart:function(name){-->
<!--                //声明购物车变量-->
<!--                let cartlist = this.datalist;-->
<!--                //声明坐标-->
<!--                let findgood = 0;-->
<!--                //遍历购物车列表-->
<!--                for(let i=0,l=cartlist.length;i<l;i++){-->

<!--                    //判断逻辑-->
<!--                    if(name == cartlist[i]['name']){-->

<!--                            cartlist[i]['num']++;-->
<!--                            findgood = 1;-->
<!--                            break;-->
<!--                    }-->
<!--                }-->
<!--                if(findgood==0){-->
<!--                    cartlist.push({name:name,num:1});-->
<!--                }-->
<!--                //重新赋值-->
<!--                this.datalist = cartlist;-->
<!--            }-->

<!--        },-->
<!--        //钩子方法-->
<!--        mounted:function(){-->

<!--            console.log('这是初始化方法');-->

<!--        },-->
<!--        //监听属性-->
<!--        watch:{-->

<!--            kilometers:function(val){-->

<!--                this.kilometers = val;-->
<!--                this.meters = val * 1000;-->

<!--            },-->
<!--            meters:function(val){-->

<!--                this.kilometers = val / 1000;-->
<!--                this.meters = val-->


<!--            }-->


<!--        },-->
<!--        //计算属性-->
<!--        computed:{-->

<!--            reverse_message:function(){-->

<!--                //反转逻辑-->
<!--                return '$'+this.message.split('').reverse().join('')-->

<!--            }-->


<!--        }-->



<!--    }-->


<!--</script>-->

<!--<style>-->

<!--    .on { background:rebeccapurple}-->
<!--    .off {background: red}-->

<!--</style>-->
